<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>置顶效果</title>
        <script src="jquery-3.1.1.js"></script>
        <style>
            .sec{
                height: 3000px;
            }
            #smallding{
                width: 15px;
                height: 40px;
                background-image:url(images/scroll.png);
                position: fixed;
                right: 0;
                bottom: 140px;
                cursor: pointer;
            }
             #smalldi{
                width: 15px;
                height: 40px;
                background-image:url(images/scroll.png);
                background-position: 0 40px;
                position: fixed;
                right: 0;
                bottom: 100px;
                cursor: pointer;
            }
            #bigding{
                width: 100px;
                height: 40px;
                background-color: #C52C42;
                color: #fff;
                border-top-left-radius: 40px;
                border-bottom-left-radius: 40px;
                position: fixed;
                right: 0;
                bottom: 140px;
                z-index: 99;
                text-align: center;
                cursor: pointer;
                opacity:0;
            }
            #bigdi{
                width: 100px;
                height: 40px;
                background-color: #333432;
                color: #fff;
                border-top-left-radius: 40px;
                border-bottom-left-radius: 40px;
                position: fixed;
                right: 0;
                bottom: 100px;
                z-index: 99;
                text-align: center;
                cursor: pointer;
                opacity:0;
            }
            a{
                color: #fff;
                text-decoration: none;
                font-size: 16px;
                line-height: 40px;
            }
        </style>
    </head>
    <body>
        <div class="sec"></div>
        <div id="bigding"><a href="#">返回顶部</a></div>
        <div id="bigdi"><a href="#">转到底部</a></div>
        <div id="smallding"></div>
        <div id="smalldi"></div>        
    </body>
</html>
<script>

    $('#bigding').hover(function(){
        console.log(233)
        $(this).animate({
            opacity:1
        },100)
    },function(){
        $(this).css('opacity',0)
    })
    $('#bigdi').hover(function(){
        $(this).animate({
            opacity:1
        },100)
    },function(){
        $(this).css('opacity',0)
    })
    // 点击返回顶部
    $('#bigding').click(function(){

    })
    // 点击返回底部
    $('#bigdi').click(function(){
        
    })
</script>